<template>
  <div class="login-form">
    <div class="login-form-title">请输扫码登录</div>
    <wxlogin
      :id="from.id"
      :appid="from.appid"
      :scope="from.scope"
      :redirect_uri="from.redirect_uri"
      :state="from.state"
      :href="href"
    />
  </div>
</template>

<script>
import { hex_md5 } from '@/utils/md5'
import Cookies from 'js-cookie'
import wxlogin from 'vue-wxlogin'
import { getPhoneCode, phoneLogin } from '@/api/loginDefine'
export default {
  name: 'PhoneLogin',
  components: {
    wxlogin
  },
  props: {
    from: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      codeUrl: require('@/assets/login/code.jpg'),
      // 二维码风格
      href:
        'data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIzMHB4O30KLmltcG93ZXJCb3ggLmluZm8sLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30='
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    this.getCookie()
  },
  methods: {
    getCode() {
      this.disableCodeBtn = true
      const [phone, type, isInDb, timestamp] = [
        this.loginForm.phone,
        1,
        1,
        Math.round(new Date())
      ]
      // console.log([phone, type, isInDb, timestamp])
      const reqParam = {
        phone: phone,
        signcode: hex_md5(phone + type + isInDb + timestamp),
        type: type,
        isindb: isInDb,
        timestamp: timestamp
      }
      const that = this
      let wait = 60

      // 倒计时
      function countDown() {
        if (wait === 0) {
          that.codeMes = '发送验证码'
          that.disableCodeBtn = false
        } else {
          wait--
          that.codeMes = '倒计时' + wait + 'S'
          setTimeout(function() {
            countDown()
          }, 1000)
        }
      }

      getPhoneCode(reqParam).then(res => {
        console.log(res)
        if (res.code === '100000000000') {
          countDown()
        } else {
          this.$notify({
            title: res.msg,
            type: 'warning',
            duration: 1500
          })
          that.codeMes = '发送验证码'
          that.disableCodeBtn = false
        }
      })
    },
    getCookie() {
      const username = Cookies.get('username')
      let password = Cookies.get('password')
      const rememberMe = Cookies.get('rememberMe')
      // 保存cookie里面的加密后的密码
      this.cookiePass = password === undefined ? '' : password
      password = password === undefined ? this.loginForm.password : password
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password,
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
        code: ''
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          const [phone, code, timestamp] = [
            this.loginForm.phone,
            this.loginForm.code,
            Math.round(new Date())
          ]
          console.log([phone, code, timestamp])
          const reqParam = {
            phone: phone,
            timestamp: timestamp,
            code: code,
            signcode: hex_md5(phone + code + timestamp)
          }
          phoneLogin(reqParam)
            .then(res => {
              console.log(res)
              this.loading = false
              let [type, message] = ['success', '']
              if (res.code === '100000000000') {
                type = 'success'
                message = '登陆成功！'
                this.$router.push({ path: this.redirect || '/' })
              } else {
                type = 'error'
                message = res.msg
              }
              this.$notify({
                title: message,
                type: type,
                duration: 1500
              })
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.login-form {
  margin: 10px auto;
  width: 80%;
  .scan-remark {
    font-size: 14px;
    margin: 0px;
    a {
      color: #3497db;
    }
  }
}
.impowerBox .qrcode {
  width: 230px;
}
.impowerBox .info,
.impowerBox .title {
  display: none;
}
</style>
